<script lang="ts" setup>
import store from '@/store'
import { routerPush } from '@/utils/tools'
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const activeKey = ref(route.name)

/**
 * @description: 监听路由的变化同时给菜单选中赋值
 */
watch(
  () => route.name,
  () => {
    activeKey.value = route.name
  }
)

/**
 * @description: 点击标签时跳转路由
 * @param {string} key 要跳转的路由名称
 */
const handleUpdateValue = (key: any) => {
  routerPush({ name: key })
}
</script>

<template lang="pug">
n-menu(:options="store.state.menuList" @update:value="handleUpdateValue" v-model:value="activeKey")
</template>

<style lang="scss" scoped>
</style>
